﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="format-detection" content="telephone=no, email=no" />
    <meta name="renderer" content="webkit">
    <title>模版页</title>
    <link href="../../css/bootstrap/bootstrap.css" rel="stylesheet" />
    <link href="../../css/fonts/icomoon/style.css" rel="stylesheet" />
    <!--插件样式 begin-->
    <link href="../../plugins/prism/prism.css" rel="stylesheet" />
    <link href="../../plugins/multiselect/multiselect.css" rel="stylesheet" />
    <link href="../../plugins/loading/loading.css" rel="stylesheet" />
    <link href="../../plugins/datetimepicker/bootstrap-datetimepicker.css" rel="stylesheet" />
    <!--插件样式 end-->
    <link href="../../css/layout/main.scss" rel="stylesheet" />
    <link href="../../css/layout/layout.scss " rel="stylesheet" />
    <link href="../../css/theme/default/style.scss" rel="stylesheet" />
    <link href="../../css/demo.scss" rel="stylesheet" /><!--此文件用于模板展示，开发不要引用-->
    <!--[if lt IE 9]>
    <script src="../../js/bootstrap/compatible/html5shiv.min.js"></script>
    <script src="../../js/bootstrap/compatible/respond.min.js"></script>
    <![endif]-->
    <style type="text/css">
        .panel-default .panel-heading{ background-color: transparent; }
    </style>
</head>
<body>
    <div data-struct="header footer">
        <header class="header">
            <div class="container">
                <link rel="import" href="../../component/header/header.html?__inline" />
            </div>
        </header>
        <nav class="container imk-nav">
            <link rel="import" href="../../component/nav/nav.html?__inline" />
        </nav>
        <main class="container">
            <div class="wrapper">
                <aside class="aside"></aside>
                <article class="content">
                    <div class="panel">
                        <h2>概览</h2>
                        <p>此框架基于Bootstrap，在使用之前请先熟读Bootstrap文档：<a href="http://v3.bootcss.com/getting-started/" target="_blank">Bootstrap v3.3.5</a></p>
                    </div>
                    <div class="panel">
                        <h2>布局</h2>
                        <p>
                            Bootstrap的布局采用先进的栅格系统，能使网页在不同大小的屏幕上获得较好的使用体验，栅格系统将网页以行（row）和列（column）划分，
                            一行分为12列，并细分为大屏（col-lg-*），中屏（col-md-*），小屏（col-sm-*），超小屏（col-xs-*），具体原理和用法详见文档：
                            <a href="//v3.bootcss.com/css/#overview-container" target="_blank">栅格系统</a>
                        </p>
                        <p>
                            我们在布局中增加了布局配置，通过修改<code>data-struct</code>属性，让页面呈现不同的布局框架。
                        </p>
                        <p>
                            如果想让<code>header</code>漂浮在页面顶部，添加<code>.header-fixed</code>即可实现。
                        </p>
                        <div class="panel panel-default">
                            <div class="panel-body">
                                <pre><code class="language-html">
                                    <noscript>
                                        <div data-struct="header footer">
                                            <div class="header header-fixed">...</div>
                                            ...
                                        </div>
                                    </noscript>
                                </code></pre>
                            </div>
                        </div>
                    </div>
                    <div class="panel">
                        <h2>排版</h2>
                        <p>
                            网页排版详见Bootstrap文档：<a href="//v3.bootcss.com/css/#type" target="_blank">排版</a>
                        </p>
                    </div>
                    <div class="panel">
                        <h2>数据绑定</h2>
                        <p>
                            数据绑定推荐<code> React + artTemplate </code>方式，部分React组件已封装，如有需要封装的组件，请与我联系。
                        </p>
                    </div>
                    <div class="panel">
                        <h2>文本</h2>
                        <p>
                            我们在Bootstrap提供的5中
                            <a href="//v3.bootcss.com/css/#helper-classes-colors" target="_blank">情景文本颜色</a>
                            基础上增加了主题文本颜色和灰度文本颜色。
                        </p>
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <p>实例：</p>
                                <ul class="list-inline">
                                    <li class="text-primary">情景文本颜色</li>
                                    <li class="text-success">情景文本颜色</li>
                                    <li class="text-info">情景文本颜色</li>
                                    <li class="text-warning">情景文本颜色</li>
                                    <li class="text-danger">情景文本颜色</li>
                                </ul>
                                <ul class="list-inline clear-margin-bottom">
                                    <li class="text-theme">主题文本颜色</li>
                                    <li class="text-gray">灰度文本颜色</li>
                                    <li class="text-gray-light">灰度文本颜色</li>
                                    <li class="text-gray-lighter">灰度文本颜色</li>
                                    <li class="text-white" style="background-color:#333;">灰度文本颜色</li>
                                </ul>
                            </div>
                            <div class="panel-body">
                            <pre><code class="language-html">
                                <noscript>
                                    <span class="text-primary">情景文本颜色</span>
                                    <span class="text-success">情景文本颜色</span>
                                    <span class="text-info">情景文本颜色</span>
                                    <span class="text-warning">情景文本颜色</span>
                                    <span class="text-danger">情景文本颜色</span>

                                    <span class="text-theme">主题文本颜色</span>
                                    <span class="text-gray">灰度文本颜色</span>
                                    <span class="text-gray-light">灰度文本颜色</span>
                                    <span class="text-gray-lighter">灰度文本颜色</span>
                                    <span class="text-white">灰度文本颜色</span>
                                </noscript>
                            </code></pre>
                            </div>
                        </div>
                    </div>
                    <div class="panel">
                        <h2>链接</h2>
                        <p>
                            链接默认无下划线，<code>hover</code>状态有下划线，
                            如果不想要蓝色链接文字，可使用<code>情景文本颜色</code>或
                            <code>灰度文本颜色</code> 类改变其颜色。
                        </p>
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <p>实例：</p>
                                <ul class="list-inline clear-margin-bottom">
                                    <li><a href="javascript:;">Link</a></li>
                                    <li><a href="javascript:;" class="text">Link</a></li>
                                    <li><a href="javascript:;" class="text-gray">Link</a>          </li>
                                    <li><a href="javascript:;" class="text-gray-light">Link</a>    </li>
                                    <li><a href="javascript:;" class="text-gray-lighter">Link</a>  </li>
                                </ul>
                            </div>
                            <div class="panel-body">
                            <pre><code class="language-html">
                                <noscript>
                                    <a href="javascript:;">Link</a>
                                    <a href="javascript:;" class="text">Link</a>
                                    <a href="javascript:;" class="text-gray">Link</a>
                                    <a href="javascript:;" class="text-gray-light">Link</a>
                                    <a href="javascript:;" class="text-gray-lighter">Link</a>
                                </noscript>
                            </code></pre>
                            </div>
                        </div>
                    </div>
                    <div class="panel">
                        <h2>列表</h2>
                        <p>
                            无序列表<code>ul</code>是最常用的布局元素，更多列表用法，详见：
                            <a href="http://v3.bootcss.com/components/#list-group" target="_blank">列表组</a>
                        </p>
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <p>实例：</p>
                                <ul class="list-unstyled list-inline">
                                    <li>List item</li>
                                    <li>List item</li>
                                    <li>List item</li>
                                    <li>List item</li>
                                    <li>List item</li>
                                </ul>
                            </div>
                            <div class="panel-body">
                                <pre><code class="language-html">
                                    <noscript>
                                        <ul class="list-unstyled list-inline">
                                            <li>List item</li>
                                            <li>List item</li>
                                            <li>List item</li>
                                            <li>List item</li>
                                            <li>List item</li>
                                        </ul>
                                    </noscript>
                                </code></pre>
                            </div>
                        </div>
                    </div>
                    <div class="panel">
                        <h2>表格</h2>
                        <p>
                            表格默认有外边距，可在需要的时候使用<code>.clear-margin-bottom</code>类清除外边距。
                            更多表格相关说明，请参考：<a href="http://v3.bootcss.com/css/#tables" target="_blank">表格</a>
                        </p>
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <p>实例：</p>
                                <table class="table table-bordered table-striped" style="margin-bottom: 5px;">
                                    <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>First Name</th>
                                        <th>Last Name</th>
                                        <th>Username</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr>
                                        <th scope="row">1</th>
                                        <td>Mark</td>
                                        <td>Otto</td>
                                        <td>@mdo</td>
                                    </tr>
                                    <tr>
                                        <th scope="row">2</th>
                                        <td>Jacob</td>
                                        <td>Thornton</td>
                                        <td>@fat</td>
                                    </tr>
                                    <tr>
                                        <th scope="row">3</th>
                                        <td>Larry</td>
                                        <td>the Bird</td>
                                        <td>@twitter</td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div class="panel-body">
                            <pre><code class="language-html">
                                <noscript>
                                    <table class="table table-bordered table-striped">
                                        <thead>
                                            <tr>
                                                <th>#</th>
                                                <th>First Name</th>
                                                <th>Last Name</th>
                                                <th>Username</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <th scope="row">1</th>
                                                <td>Mark</td>
                                                <td>Otto</td>
                                                <td>@mdo</td>
                                            </tr>
                                            ...
                                        </tbody>
                                    </table>
                                </noscript>
                            </code></pre>
                            </div>
                        </div>
                    </div>
                    <div class="panel">
                        <h2>表单</h2>
                        <p>
                            Bootstrap的表单控件，大部分加上<code>.form-control</code>类就会有对应修饰，
                            表单控件就不一一赘述了，请参阅Bootstrap文档：
                            <a href="//v3.bootcss.com/css/?#forms" target="_blank">表单</a>
                        </p>
                        <p>
                            <code>注：强烈建议使用表单提交数据，避免因js脚本问题导致表单无法提交，增强程序的健壮性。</code>
                        </p>
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <p>实例：</p>
                                <div class="grid row-middle" style="width: 300px">
                                    <div class="row">
                                        <div class="col-xs-3">输入框</div>
                                        <div class="col-xs-9"><input type="text" class="form-control" /></div>
                                    </div>
                                    <div class="row">
                                        <div class="col-xs-3">下拉框</div>
                                        <div class="col-xs-9">
                                            <select class="form-control">
                                                <option>Option 1</option>
                                                <option>Option 2</option>
                                                <option>Option 3</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-xs-3">选择框</div>
                                        <div class="col-xs-4">
                                            <label>
                                                <input type="radio" />
                                                单选框
                                            </label>
                                        </div>
                                        <div class="col-xs-4">
                                            <label>
                                                <input type="checkbox" />
                                                多选框
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="panel-body">
                                <pre><code class="language-html">
                                    <noscript>
                                        <input type="text" class="form-control" />

                                        <select class="form-control">
                                            <option>Option 1</option>
                                            <option>Option 2</option>
                                            <option>Option 3</option>
                                        </select>

                                        <label>
                                            <input type="radio" />
                                            单选框
                                        </label>

                                        <label>
                                            <input type="checkbox" />
                                            多选框
                                        </label>
                                    </noscript>
                                </code></pre>
                            </div>
                        </div>
                    </div>
                    <div class="panel">
                        <h2 id="ButtonGroup">按钮组</h2>
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <p>实例：</p>
                                <div class="btn-group">
                                    <input type="radio" name="group1" id="g1" class="hidden" checked>
                                    <label class="btn" for="g1">全部</label>

                                    <input type="radio" name="group1" id="g2" class="hidden">
                                    <label class="btn" for="g2">技术</label>

                                    <input type="radio" name="group1" id="g3" class="hidden">
                                    <label class="btn" for="g3">销售</label>

                                    <input type="radio" name="group1" id="g4" class="hidden">
                                    <label class="btn" for="g4">服务</label>

                                    <input type="radio" name="group1" id="g5" class="hidden">
                                    <label class="btn" for="g5">其他</label>
                                </div>
                            </div>
                            <div class="panel-body">
                                <pre><code class="language-html">
                                    <noscript>
                                        <div class="btn-group">
                                            <input type="radio" name="group1" id="g1" class="hidden" checked>
                                            <label class="btn" for="g1">全部</label>

                                            <input type="radio" name="group1" id="g2" class="hidden">
                                            <label class="btn" for="g2">技术</label>

                                            <input type="radio" name="group1" id="g3" class="hidden">
                                            <label class="btn" for="g3">销售</label>

                                            <input type="radio" name="group1" id="g4" class="hidden">
                                            <label class="btn" for="g4">服务</label>

                                            <input type="radio" name="group1" id="g5" class="hidden">
                                            <label class="btn" for="g5">其他</label>
                                        </div>
                                    </noscript>
                                </code></pre>
                            </div>
                        </div>
                    </div>
                    <div class="panel">
                        <h2>时间控件</h2>
                        <p>
                            修复了<code>bootstrap-datetimepicker</code>中的一些bug，还有对使用体验上的一些优化，比如修复连续点击input控件，选择框隐藏后不再显示。
                        </p>
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <p>实例：</p>
                                <div style="width: 300px;">
                                    <input type="text" class="form-control" role="datetimepicker" placeholder="请选择日期" readonly />
                                </div>
                            </div>
                            <div class="panel-body">
                                <pre><code class="language-html">
                                    <noscript>
                                        <head>
                                            ...
                                            <link href="path/to/bootstrap-datetimepicker.css" rel="stylesheet" />
                                        </head>
                                        &lt;body&gt;
                                            <input type="text" class="form-control" role="datetimepicker" placeholder="请选择日期" readonly />
                                            ...
                                            <script src="path/to/bootstrap-datetimepicker.js"></script>
                                            <script src="path/to/lang/bootstrap-datetimepicker.zh-CN.js"></script>
                                            <script type="text/javascript">
                                                $("[role='datetimepicker']").datetimepicker({
                                                    autoclose: 1,           //选择后自动关闭  默认0
                                                    format: "yyyy-mm-dd",   //日期格式化  默认yyyy-mm-dd HH:ii
                                                    language: "zh-CN",      //语言  默认英语
                                                    startView: 2,           //起始窗口  默认1  1.时间 2.日 3.月 4.年
                                                    minView: 2              //最小窗口  默认1  1.时间 2.日 3.月 4.年
                                                });
                                            </script>
                                        &lt;/body&gt;
                                    </noscript>
                                </code></pre>
                            </div>
                        </div>
                    </div>
                    <div class="panel">
                        <h2 id="multiselect">多选下拉菜单</h2>
                        <p>
                            多选下拉菜单宽度默认是自适应的，会根据你选择项的多少自适应宽度，
                            你也可以根据情况为<code>.multiselect</code>设置固定宽度，让选择项超出指定宽度后换行。
                        </p>
                        <p>
                            绑定时通过传入<code>filter</code>方法可定义过滤器，每次选择都会触发过滤器，
                            通过返回<code>false</code>来过滤不能选择的选项。
                        </p>
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <p>实例：</p>
                                <div id="myMultiSelect1" class="btn-group multiselect">
                                    <button type="button" class="btn btn-default selected-group" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                        <ul class="list-selected"></ul>
                                    </button>
                                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                        <span class="caret"></span>
                                    </button>
                                    <ul class="dropdown-menu">
                                        <li><a href="javascript:;" data-value="1">Tag1</a></li>
                                        <li><a href="javascript:;" data-value="2">Tag2</a></li>
                                        <li><a href="javascript:;" data-value="3">Tag3</a></li>
                                        <li><a href="javascript:;" data-value="4">Tag4</a></li>
                                        <li><a href="javascript:;" data-value="5">Tag5</a></li>
                                    </ul>
                                </div>
                            </div>
                            <div class="panel-body">
                            <pre><code class="language-html">
                                <noscript>
                                    <head>
                                        ...
                                        <link href="path/to/multiselect.css" rel="stylesheet" />
                                    </head>
                                    &lt;body&gt;
                                        <div id="myMultiSelect" class="btn-group multiselect">
                                            <button type="button" class="btn btn-default selected-group" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                <ul class="list-selected"></ul>
                                            </button>
                                            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                <span class="caret"></span>
                                            </button>
                                            <ul class="dropdown-menu">
                                                <li><a href="javascript:;" data-value="1">Tag1</a></li>
                                                <li><a href="javascript:;" data-value="2">Tag2</a></li>
                                                <li><a href="javascript:;" data-value="3">Tag3</a></li>
                                                <li><a href="javascript:;" data-value="4">Tag4</a></li>
                                                <li><a href="javascript:;" data-value="5">Tag5</a></li>
                                            </ul>
                                        </div>
                                        <script src="path/to/multiselect.js"></script>
                                        <script type="text/javascript">
                                            $(function(){
                                                $("#myMultiselect").multiselect({
                                                    filter: function(value, text, selected){
                                                        if (value == "your condition"){
                                                            //当前选项不可选
                                                            return false;
                                                        }
                                                    }
                                                });
                                            })
                                        </script>
                                    &lt;/body&gt;
                                </noscript>
                            </code></pre>
                            </div>
                        </div>
                    </div>
                    <div class="panel">
                        <h2>按钮</h2>
                        <p>
                            Bootstrap的按钮已经可以满足大部分需求了，我们在此基础上加了一个主题按钮。
                        </p>
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <p>实例：</p>
                                <ul class="list-inline clear-margin-bottom">
                                    <li><button type="button" class="btn btn-default">Button</button></li>
                                    <li><button type="button" class="btn btn-primary">Button</button></li>
                                    <li><button type="button" class="btn btn-success">Button</button></li>
                                    <li><button type="button" class="btn btn-info">Button</button></li>
                                    <li><button type="button" class="btn btn-warning">Button</button></li>
                                    <li><button type="button" class="btn btn-danger">Button</button></li>
                                    <li><button type="button" class="btn btn-theme  ">Button</button></li>
                                </ul>
                            </div>
                            <div class="panel-body">
                            <pre><code class="language-html">
                                <noscript>
                                    <button type="button" class="btn btn-default">Button</button>
                                    <button type="button" class="btn btn-primary">Button</button>
                                    <button type="button" class="btn btn-success">Button</button>
                                    <button type="button" class="btn btn-info">Button</button>
                                    <button type="button" class="btn btn-warning">Button</button>
                                    <button type="button" class="btn btn-danger">Button</button>
                                    <button type="button" class="btn btn-theme">Button</button>
                                </noscript>
                            </code></pre>
                            </div>
                        </div>
                    </div>
                    <div class="panel">
                        <h2>面包屑导航</h2>
                        <p>
                            对Bootstrap的面包屑导航做了一些修改，分隔符<code>/</code>改为<code>&gt;</code>。
                        </p>
                        <p>
                            你可以在有序列表的第一个<code>&lt;li&gt;</code>上加一个<code>.description</code>类来作为说明文字。
                        </p>
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <div>实例：</div>
                                <ol class="breadcrumb clear-margin-bottom">
                                    <li class="description">你的位置：</li>
                                    <li><a href="javascript:;">Home</a></li>
                                    <li><a href="javascript:;">Library</a></li>
                                    <li class="active">Data</li>
                                </ol>
                            </div>
                            <div class="panel-body">
                            <pre><code class="language-html">
                                <noscript>
                                    <ol class="breadcrumb">
                                        <li class="description">你的位置：</li>
                                        <li><a href="javascript:;">Home</a></li>
                                        <li><a href="javascript:;">Library</a></li>
                                        <li class="active">Data</li>
                                    </ol>
                                </noscript>
                            </code></pre>
                            </div>
                        </div>
                    </div>
                    <div class="panel">
                        <h2>模态框</h2>
                        <p>Bootstrap的模态框并没有上下居中，我们在<code>global.js</code>中对其进行了扩展，给<code>.modal</code>加上<code>.middle</code>类，可以使其垂直居中。</p>
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <p>实例：</p>
                                <div>
                                    <button type="button" class="btn btn-theme" data-toggle="modal" data-target="#myModal1">Open Modal</button>
                                </div>
                            </div>
                            <div class="panel-body">
                            <pre><code class="language-html">
                                <noscript>
                                    <div id="myModal" class="modal middle fade">
                                        <div class="modal-dialog">
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                                    <h4 class="modal-title">Modal title</h4>
                                                </div>
                                                <div class="modal-body">
                                                    <p>One fine body...</p>
                                                </div>
                                                <div class="modal-footer">
                                                    <button type="button" class="btn btn-primary">Save</button>
                                                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                                                </div>
                                            </div><!-- /.modal-content -->
                                        </div><!-- /.modal-dialog -->
                                    </div><!-- /.modal -->
                                    ...
                                    <script src="path/to/global.js"></script>
                                </noscript>
                            </code></pre>
                            </div>
                        </div>
                    </div>
                    <div class="panel">
                        <h2>下拉菜单（React）</h2>
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <p>实例：</p>
                                <div id="DropdownSelectDemo"></div>
                            </div>
                            <div class="panel-body">
                                <pre><code class="language-html">
                                    <noscript>
                                        <div id="dropdownSelect"></div>
                                        ...
                                        <script src="path/to/react.min.js"></script>
                                        <script src="path/to/react-dom.min.js"></script>
                                        <script src="path/to/dropdown.jsx"></script>
                                        <script type="text/javascript">
                                            //渲染组件
                                            ReactDOM.render(
                                                React.createElement(ReactWebComponent.Dropdown, {
                                                    id: "lstSelect",
                                                    get: {
                                                        url: "/Content/LMS/component/react/test/dropdown.txt"
                                                    },
                                                    defaultText: "Please select",
                                                    onItemClick: function () {
                                                        console.log({ value: $("#lstSelect").val(), text: $(this).text() });
                                                    }
                                                }),
                                                document.getElementById("dropdownSelect")
                                            );
                                        </script>
                                    </noscript>
                                </code></pre>
                            </div>
                        </div>
                    </div>
                    <div class="panel">
                        <h2>评论列表</h2>
                        <p>
                            评论列表我们使用Bootstrap的媒体对象列表。
                        </p>
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <p>实例：</p>
                                <ul class="media-list">
                                    <li class="media">
                                        <div class="media-left">
                                            <a href="javascript:;">
                                                <img class="media-object" data-src="holder.js/64x64" alt="64x64" src="" data-holder-rendered="true" style="width: 64px; height: 64px;">
                                            </a>
                                        </div>
                                        <div class="media-body">
                                            <h4 class="media-heading">Media heading</h4>
                                            <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.</p>
                                            <!-- Nested media object -->
                                            <div class="media">
                                                <div class="media-left">
                                                    <a href="javascript:;">
                                                        <img class="media-object" data-src="holder.js/64x64" alt="64x64" src="" data-holder-rendered="true" style="width: 64px; height: 64px;">
                                                    </a>
                                                </div>
                                                <div class="media-body">
                                                    <h4 class="media-heading">Nested media heading</h4>
                                                    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
                                                    <!-- Nested media object -->
                                                    <div class="media">
                                                        <div class="media-left">
                                                            <a href="javascript:;">
                                                                <img class="media-object" data-src="holder.js/64x64" alt="64x64" src="" data-holder-rendered="true" style="width: 64px; height: 64px;">
                                                            </a>
                                                        </div>
                                                        <div class="media-body">
                                                            <h4 class="media-heading">Nested media heading</h4>
                                                            Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- Nested media object -->
                                            <div class="media">
                                                <div class="media-left">
                                                    <a href="javascript:;">
                                                        <img class="media-object" data-src="holder.js/64x64" alt="64x64" src="" data-holder-rendered="true" style="width: 64px; height: 64px;">
                                                    </a>
                                                </div>
                                                <div class="media-body">
                                                    <h4 class="media-heading">Nested media heading</h4>
                                                    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                            <div class="panel-body">
                                <pre><code class="language-html">
                                    <noscript>
                                        <ul class="media-list">
                                            <li class="media">
                                                <div class="media-left">
                                                    <a href="javascript:;">
                                                        <img class="media-object" src="..." alt="...">
                                                    </a>
                                                </div>
                                                <div class="media-body">
                                                    <h4 class="media-heading">Media heading</h4>
                                                  ...
                                                </div>
                                            </li>
                                        </ul>
                                    </noscript>
                                </code></pre>
                            </div>
                        </div>
                    </div>
                    <div class="panel">
                        <h2>自定义切换</h2>
                        <p>
                            我们在<code>global.js</code>里添加了自定义切换class和文字的功能，免去重复编写脚本切换元素状态，
                            只需添加简单的自定义属性<code>data-toggle-class</code>或<code>data-toggle-text</code>，
                            还可以通过<code>data-target</code>指定切换的对象。
                        </p>
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <p>实例：</p>
                                <button type="button" class="btn btn-theme" data-toggle-class="btn-theme">点我切换状态</button>
                                <button type="button" class="btn btn-theme" data-toggle-text="我是切换后的文字">点我切换文字</button>
                                <button type="button" class="btn btn-theme" data-toggle-class="header-fixed" data-target=".header">点我切换header漂浮状态</button>
                            </div>
                            <div class="panel-body">
                                <pre><code class="language-html">
                                    <noscript>
                                        <button type="button" class="btn btn-theme" data-toggle-class="btn-theme">点我切换状态</button>
                                        <button type="button" class="btn btn-theme" data-toggle-text="我是切换后的文字">点我切换文字</button>
                                        <button type="button" class="btn btn-theme" data-toggle-class="header-fixed" data-target=".header">点我切换header漂浮状态</button>
                                    </noscript>
                                </code></pre>
                            </div>
                        </div>
                    </div>
                    <div class="panel">
                        <h2>Loading</h2>
                        <p>
                            这是一个简单的Loading插件，你可以指定你想要的Loading图片，背景颜色，及背景透明度。
                            因为每个项目Loading的样式不同，为了遵守开闭原则，建议你在公用js中初始化一个Loading对象去使用。
                        </p>
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <p>实例：</p>
                                <button id="btnOpenLoading" type="button" class="btn btn-theme">Open Loading</button>
                            </div>
                            <div class="panel-body">
                                <pre><code class="language-javascript">
                                    <noscript>
                                        //初始化 Loading 插件
                                        var loading = new Loading({
                                            image: "/Content/LMS/plugins/loading/loading.gif",
                                            background: "#000",
                                            opacity: 0.5
                                        });

                                        loading.show(); //显示loading
                                        loading.hide(); //隐藏loading
                                    </noscript>
                                </code></pre>
                            </div>
                        </div>
                    </div>
                    <div class="panel">
                        <h2>回到顶部</h2>
                        <p>
                            通用回到顶部组件，在<code>global.js</code>中，不依赖Bootstrap。
                        </p>
                        <div class="panel panel-default">
                            <div class="panel-body">
                                <pre><code class="language-html">
                                    <noscript>
                                        <div class="aside-right-bottom">
                                            <ul class="list-unstyled clear-margin-bottom">
                                                <li id="myBackToTop">
                                                    <a href="javascript:;" class="icon-back-to-top"></a>
                                                </li>
                                            </ul>
                                        </div>
                                        ...
                                        <script src="path/to/global.js"></script>
                                        <script type="text/javascript">
                                            $("#myBackToTop").BackToTop({
                                                shownScrollTop: 10,        //滚动高度超过此数值时显示回到顶部图标
                                                scrollTarget: window,      //滚动对象
                                                container: ".right-side",  //定位回到顶部图标的容器
                                                right: 20,                 //回到顶部图标距离浏览器窗口右侧距离
                                                bottom: 100                //回到顶部图标距离浏览器窗口下方距离
                                            });
                                        </script>
                                    </noscript>
                                </code></pre>
                            </div>
                        </div>
                    </div>
                </article>
            </div>
        </main>
        <footer class="footer">
            <link rel="import" href="../../component/footer/footer.html?__inline" />
        </footer>
        <aside class="right-side">
            <ul class="list-unstyled clear-margin-bottom">
                <li id="backToTop" style="display: none;">
                    <a href="javascript:;" class="icon-back-to-top"></a>
                </li>
            </ul>
        </aside>
    </div>
    <div id="myModal1" class="modal middle fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">Modal title</h4>
                </div>
                <div class="modal-body">
                    <p>One fine body...</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary">Save</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
    <script src="../../js/jquery/jquery-1.11.2.js"></script>
    <script src="../../js/bootstrap/bootstrap.js"></script>
    <script src="../../js/react/react.min.js"></script>
    <script src="../../js/react/react-dom.min.js"></script>
    <script src="../../component/react/dropdown.jsx"></script>
    <!--插件脚本 begin-->
    <script src="../../plugins/multiselect/multiselect.js"></script>
    <script src="../../plugins/loading/loading.jquery.js"></script>
    <script src="../../plugins/datetimepicker/bootstrap-datetimepicker.js"></script>
    <script src="../../plugins/datetimepicker/lang/bootstrap-datetimepicker.zh-CN.js"></script>
    <!--插件脚本 end-->
    <script src="../../js/global.js"></script>
    <script src="../../plugins/prism/prism.extend.js"></script><!--此文件用于模板展示，开发不要引用-->
    <script type="text/javascript">
        $(function () {

            //渲染下拉列表
            ReactDOM.render(
                React.createElement(ReactWebComponent.Dropdown, {
                    id: "lstSelect",
                    get: {
                        url: "/Content/LMS/component/react/test/dropdown.txt"
                    },
                    defaultText: "Please select",
                    onItemClick: function () {
                        console.log({ value: $("#lstSelect").val(), text: $(this).text() });
                    }
                }),
                document.getElementById("DropdownSelectDemo")
            );

            //初始化多选下拉列表插件
            $("#myMultiSelect1").multiselect();

            //初始化Loading插件
            var loading = new Loading({
                image: "/Content/LMS/plugins/loading/loading.gif"
            });
            var timeoutID = 0;
            $("#btnOpenLoading").click(function () {
                loading.show();
                clearTimeout(timeoutID);
                timeoutID = setTimeout(function () {
                    loading.hide();
                }, 2000);
            });

            //初始化回到顶部
            $("#backToTop").BackToTop({
                bottom: 100
            });

            $("[role='datetimepicker']").datetimepicker({
                autoclose: 1,
                format: "yyyy-mm-dd",
                language: "zh-CN",
                startView: 2,
                minView: 2
            });

        })
    </script>
    <script src="../../plugins/prism/prism.js"></script>
</body>
</html>